<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    :width="modalWidth"
    :height="600"
    :enableComment="enableComment"
    :defaultFullscreen="false"
    @ok="handleSubmit"
    wrapClassName="jeecg-online-modal"
  >
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <template #comment> <comment-panel ref="commentPanelRef" :tableName="tableName" :dataId="formDataId" /></template>
    <template #default>
      <online-form-detail ref="onlineFormCompRef" id="id" :form-template="formTemplate" :show-sub="showSub" @rendered="renderSuccess" />
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, watch } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  import OnlineFormDetail from '../comp/OnlineFormDetail.vue';
  import { useAutoModal } from '../../use/useAutoForm';
  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue';

  export default defineComponent({
    name: 'OnlineDetailModal',
    components: {
      BasicModal,
      OnlineFormDetail,
      CommentPanel,
    },
    props: {
      id: {
        type: String,
        required: false,
        default: '',
      },
    },
    emits: ['success', 'register'],
    setup(props) {
      console.log('进入表单弹框》》》》modal');
      const {
        title,
        modalWidth,
        registerModal,
        cgButtonList,
        handleCgButtonClick,
        disableSubmit,
        handleSubmit,
        submitLoading,
        handleCancel,
        handleFormConfig,
        onlineFormCompRef,
        formTemplate,
        isTreeForm,
        pidFieldName,
        renderSuccess,
        formRendered,
        showSub,
        tableName,
        formDataId,
        enableComment,
      } = useAutoModal();
      watch(() => props.id, renderFormItems, { immediate: true });
      async function renderFormItems() {
        formRendered.value = false;
        if (!props.id) {
          return;
        }
        console.log('重新渲染表单》》》》modal');
        await handleFormConfig(props.id, {});
      }
      const that = {
        title,
        onlineFormCompRef,
        renderSuccess,
        registerModal,
        handleSubmit,
        handleCancel,
        modalWidth,
        formTemplate,
        disableSubmit,
        cgButtonList,
        handleCgButtonClick,
        isTreeForm,
        pidFieldName,
        submitLoading,
        showSub,
        tableName,
        formDataId,
        enableComment,
      };
      return that;
    },
  });
</script>
<style scoped></style>
